<template>
  <div class="client-manager">
    <div class="client-info">
      <div class="client-info-tabs">
        <el-tabs v-model="activeTabPaneName">
          <el-tab-pane label="客户信息" :name="clientType.CLIENT_INFO"></el-tab-pane>
          <el-tab-pane label="服务团队" :name="clientType.CLIENT_SERVICE"></el-tab-pane>
          <el-tab-pane label="营销阶段" :name="clientType.CLIENT_STAGE"></el-tab-pane>
        </el-tabs>
        <div class="button-container">
          <el-button class="back-page" @click="handelBack">返回上一页</el-button>
        </div>
      </div>
      <component :is="cmpInstance" :customerId="customerId"></component>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import { useRouter } from "vue-router";
import { useRouteQuery } from "@vueuse/router";
import { clientType, dynamicComponentMap } from "./config";

const router = useRouter();

const customerId = useRouteQuery("customerId");
const activeTabPaneName = ref(clientType.CLIENT_INFO);

const cmpInstance = computed(() => {
  return dynamicComponentMap.get(activeTabPaneName.value) || "";
});

const handelBack = () => {
  router.go(-1);
};
</script>

<style scoped lang="scss">
@use "clientLoseInfo";
</style>
